<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 节点的优点 -->
		<div>
			我是div
		</div>
		<div>
			我是span
		</div>
		<ul>
			<li>我是li</li>
			<li>我是li</li>
			<li>我是li</li>
			<li>我是li</li>
		</ul>
		<div class="box">
			<span class="qrcode">

			</span>
		</div>
		<script type="text/javascript">
			var box = document.querySelector(".box");
			console.dir(box)
			//获取父节点
			var qrcode = document.querySelector(".qrcode");
			console.log(qrcode.parentNode)

			//获取子节点
			//换行也是节点
			//节点类型  nodeType
			//元素节点： 1 
			//属性节点： 2
			//文本节点： 3
			console.log(box.childNodes)
			//2.children 获取所有子元素节点
			var ul = document.querySelector("ul");
			console.log(ul.children);
		</script>
	</body>
</html>
